<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>更换头像</span>
        </div>
        <div>
            <!-- 图片，用来展示用户选择的头像 -->
            <!-- v-if 和 v-else 指令，动态预览用户头像 -->
            <img :src="avatar" alt="" class="preview" v-if="avatar" />
            <img src="../../../assets/images/avatar.jpg" alt="" class="preview" v-else />

            <!-- 按钮区域 -->
            <div class="btn-box">
                <input type="file" accept="image/*" style="display:none;" ref="iptRef" @change="onFileChange">
                <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
                <!-- 属性绑定指令，动态控制“上传头像”按钮的禁用状态 -->
                <el-button type="success" icon="el-icon-upload" :disabled="avatar === ''" @click="uploadAvatar">上传头像
                </el-button>
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'UserAvatar',
    data() {
        return {
            avatar: ''
        }
    },
    methods: {
        // 选择图片
        chooseImg() {
            // 模拟点击行为
            this.$refs.iptRef.click()
        },
        // 渲染头像
        onFileChange(e) {
            // 1.获取用户选择的文件列表(伪数组)
            const files = e.target.files
            if (files.length === 0) {
                // 2.没有选择图片
                this.avatar = ''
            } else {
                // 3.选择了图片
                // console.log(files[0]);
                // 1.创建 FileReader 对象
                const fr = new FileReader()
                // 2.调用 readAsDataURL 函数,读取文件内容
                fr.readAsDataURL(files[0])
                // 3.监听 fr 的 onload 事件
                fr.onload = e => {
                    // 4.通过 e.target.result 获取到读取的结果,值是字符串(base64 格式的字符串)
                    this.avatar = e.target.result
                }
            }
        },
        // 上传用户头像
        async uploadAvatar() {
            const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.avatar })
            if (res.code !== 0) return this.$message.error('上传头像失败!')
            this.$message.success('上传头像成功!')
            this.$store.dispatch('initUserInfo')
        }
    }
}
</script>

<style lang="less" scoped>
.btn-box {
    margin-top: 10px;
}

.preview {
    object-fit: cover;
    width: 350px;
    height: 350px;
}
</style>
